<template>
  <div class="container">
    <div v-show="!detailVisible">
      <!-- 搜索 -->
      <table>
        <tr>
          <th style="width: 400px;">
            <span>校区：</span>
            <el-button
              @click="openCampusList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="campusSelect">{{campusSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width: 400px;">
            <span>地址：</span>
            <el-button
              @click="openAddressList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="addressSelect">{{addressSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th style="width: 100px;">
            <el-button type="primary" icon="el-icon-search" @click="searchCampus">搜索</el-button>
          </th>
        </tr>
      </table>
      <!-- 校区筛选 -->
      <el-dialog title="选择校区" :visible.sync="openCampusList">
        <el-input placeholder="请输入关键字" v-model="campusKeyword">
          <template slot="prepend">校区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCampusByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="campusSelect">
          <el-radio
            v-for="(campus, index) in campusList"
            :key="'campus' + index"
            :label="campus"
          >{{ campus.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="campusSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openCampusList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 地址筛选 -->
      <el-dialog title="选择地址" :visible.sync="openAddressList">
        <el-input placeholder="请输入关键字" v-model="addressKeyword">
          <template slot="prepend">地址名</template>
          <el-button slot="append" icon="el-icon-search" @click="getAddressByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="addressSelect">
          <el-radio
            v-for="(address, index) in addressList"
            :key="'address' + index"
            :label="address"
          >{{ address.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addressSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openAddressList = false">确 定</el-button>
        </div>
      </el-dialog>
      <hr />
      <div>
        <el-table
          :data="schoolList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          border
          @row-click="rowClick"
        >
          <el-table-column prop="name" label="校区名称" />
          <el-table-column prop="english_name" label="英文名称" />
          <el-table-column prop="telephone" label="校区办公室电话" />
          <el-table-column prop="address_name" label="地址" />
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          style="margin-left: 30%;"
        ></el-pagination>
      </div>
    </div>
    <!-- 校区详情对话框 -->
    <div v-show="detailVisible">
      <campusDetails :campusDetails="campusDetails" @closeDetailDialog="closeDetailDialog" />
    </div>
  </div>
</template>
<script>
import campusDetails from "@/views/education-collegeField/school/details";
import { getSchoolList } from "@/api/school";
export default {
  name: "School",
  data() {
    return {
      drawer: false,
      tableTotal: 0,
      currentPage: 1,
      pagesize: 10,
      detailVisible: false, //判断详情对话框打开
      schoolList: [], //校区列表
      campusDetails: {}, //某一行的校区详情

      openCampusList: false, //校区筛选对话框显示
      campusSelect: "", //选择的校区
      campusKeyword: "", //关键词搜索校区
      campusList: [], //校区列表

      openAddressList: false, //地址筛选对话框的显示
      addressSelect: "", //地址选择
      addressKeyword: "", //关键词搜索地址
      addressList: [], //地址列表
    };
  },
  components: {
    campusDetails,
  },
  created() {
    //获取所有的校区列表
    this.getSchoolList();
    //获取校区列表
    this.getCampusList();
    //获取地址列表
    this.getAddressList();
  },
  methods: {
    //获取所有校区列表
    getSchoolList() {
      getSchoolList().then((res) => {
        this.schoolList = res.data.schoolList;
      });
    },

    //获取校区列表
    getCampusList() {
      this.campusList = [
        { id: "1", name: "主校区" },
        { id: "2", name: "星湖校区" },
      ];
    },

    //获取地址列表
    getAddressList() {
      this.addressList = [
        { id: "01", name: "肇庆" },
        { id: "02", name: "广州" },
      ];
    },

    //关键词搜索校区
    getCampusByKeyword() {},

    //关键词搜索地址
    getAddressByKeyword() {},

    //条件搜索
    searchCampus() {},

    //点击某一行显示校区的具体详情
    rowClick(val) {
      this.detailVisible = true;
      this.campusDetails = val;
    },

    //关闭校区详情对话框
    closeDetailDialog(val) {
      this.detailVisible = val;
    },

    // 换页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>
<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
th {
  text-align: left;
}
</style>
